import Vue from 'vue';
import Clickoutside from 'element-ui/src/utils/clickoutside';

//自定义聚焦指令
Vue.directive('focus', {
    inserted(el) {
        el.focus();
    }
});

//自定义粘贴指令
Vue.directive('paste', {
    bind(el, binding, vnode) {
        el.addEventListener('paste', function (event) { //这里直接监听元素的粘贴事件
            binding.value(event)
        })
    }
});

//自定义拖拽指令
Vue.directive('drag', {
    bind(el, binding, vnode) {
        //因为拖拽还包括拖动时的经过事件，离开事件，和进入事件，放下事件，
        //浏览器对于拖拽的默认事件的处理是打开拖进来的资源，
        //所以要先对这三个事件进行默认事件的禁止
        el.addEventListener('dragenter', function (event) {
            event.stopPropagation();
            event.preventDefault();
        })
        el.addEventListener('dragover', function (event) {
            event.stopPropagation();
            event.preventDefault();
        })
        el.addEventListener('dragleave', function (event) {
            event.stopPropagation();
            event.preventDefault();
        })
        el.addEventListener('drop', function (event) {
            //这里阻止默认事件，并绑定事件的对象，用来在组件上返回事件对象
            event.stopPropagation();
            event.preventDefault();
            binding.value(event)
        })
    }
});

//点击其他地方隐藏指令
Vue.directive('outside', Clickoutside);

//自定义处理a标签颜色指令 v-href="red"
Vue.directive('href', {
    inserted(el, binding) {
        let color = binding.value ? binding.value : 'white';
        let els = el.querySelectorAll('a');
        if (els) {
            els.forEach((item, i) => {
                item.style = `color: ${color};padding:0 2px;border-bottom: 1px solid ${color};`;
            });
        }
    }
});